<!-- 入职申请二维码弹窗 -->
<template>
  <a-modal
    width="50%"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    :mask-closable="false"
    title-align="center"
    unmount-on-close
  >
    <template #title> {{ formData.name }} </template>
    <section class="code-wrap">
      <div class="qrCode">
        <div :id="`qrCode${formData.id}`">
          <VueQr
            ref="qrCode"
            text=""
            :logoScale="40"
            :size="150"
            :margin="10"
          />
        </div>
        <a-button
          type="outline"
          style="margin-top: 20px"
          @click="saveQrcode(formData.id)"
          >保存二维码</a-button
        >
      </div>
      <div class="qrCode-info">
        <a-space>
          <h3>有效类型:</h3>
          <a-radio-group v-model="formData.duration">
            <a-radio :value="-1">永久</a-radio>
            <a-radio :value="2">有效期</a-radio>
          </a-radio-group>
          <a-space v-show="formData.duration === 2">
            <a-input-number
              v-model="formData.time"
              placeholder="请输入有效天数"
              hide-button
              :min="1"
              :precision="0"
            />天
          </a-space>
          <a-tooltip content="刷新链接">
            <IconFont
              style="cursor: pointer"
              :size="20"
              type="icon-shuaxin"
              @click="refreshLink(formData)"
            ></IconFont>
          </a-tooltip>
        </a-space>
        <a-textarea v-model="formData.url" disabled :style="{ width: '80%' }" />
        <a-button
          type="primary"
          @click="copyLink(formData.url)"
          style="width: 200px"
          >复制链接</a-button
        >
      </div>
    </section>
  </a-modal>
</template>

<script lang="ts" setup>
import { cloneDeep } from 'lodash';
import VueQr from 'vue-qr/src/packages/vue-qr.vue';
import { base64ToBlob } from '@/utils/utils';
import { Message } from '@arco-design/web-vue';
import { PostApplySign } from '@/apis/management/personnel/changeManagement/inductionManagement';
import {
  PutEntryApplicationSetting,
  GetEntryApplicationSettingDetail
} from '@/apis/management/human/humanChange/entry';
const props = withDefaults(
  defineProps<{
    visible: boolean; // 是否显示对话框
    data: any; // 传入的数据
  }>(),
  {
    visible: false
  }
);

let formData = ref({});
const emits = defineEmits(['update:visible']);

watch(
  () => props.visible,
  (newVal: boolean) => {
    if (newVal) {
      console.log('====================================');
      console.log(props.data);
      console.log('====================================');
      formData.value = cloneDeep(props.data);
    }
  }
);

let qrCode = ref();
// 保存二维码
const saveQrcode = (id: number) => {
  const fileName = `二维码${id}`;
  const img = qrCode.value.imgUrl;
  let aLink = document.createElement('a');
  let blob = base64ToBlob(img);
  let evt = document.createEvent('HTMLEvents');
  evt.initEvent('click', true, true); // initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
  aLink.download = fileName;
  aLink.href = URL.createObjectURL(blob);
  aLink.click();
};

// 刷新链接
const refreshLink = async (record: any) => {
  try {
    if (record.duration === 2 && !record.time) {
      Message.error('请输入有效天数！');
      return;
    }
    const { sign, timeStamp } = await PostApplySign({
      duration: record.duration
    });
    record.url = `http://192.168.31.103:5173/entryApplicationInviteMobile?id=${record.id}&sign=${sign}&timeStamp=${timeStamp}`;
    await PutEntryApplicationSetting({
      ...record
    });
    refresh();
  } catch (error: unknown) {
    console.log(error);
  }
};

// 复制链接
const copyLink = (url: string) => {
  navigator.clipboard.writeText(url).then(
    function () {
      /* 如果文本成功复制，显示一条消息来确认 */
      Message.success('复制成功！');
    },
    function (err) {
      /* 如果出现错误，显示一条错误消息 */
      Message.error('复制失败，请重试！');
    }
  );
};

const refresh = async () => {
  try {
    formData.value = await GetEntryApplicationSettingDetail({
      id: formData.value.id
    });
    console.log('====================================');
    console.log(res);
    console.log('====================================');
  } catch (error: unknown) {
    console.log(error);
  }
};
const handleOk = async () => {
  emits('update:visible', false);
};

const handleCancel = () => {
  emits('update:visible', false);
};
</script>

<style scoped lang="less">
.code-wrap {
  display: flex;
  .qrCode {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
    border-right: 1px #dfddddee solid;
    margin-right: 20px;
  }
  .qrCode-info {
    flex: 1;
    display: flex;
    flex-direction: column;

    &-header {
      display: flex;
      justify-content: space-between;
    }
  }
  .qrCode-info > :nth-child(3) {
    margin-top: 30px;
  }
}
</style>
